<template>
	<view>
		<view class="title-image">
			<view @click="back()" style="position:absolute;top:60upx;left:25upx;z-index: 9999; border-radius: 50%;width: 50upx;height: 50upx; display: flex;justify-content: center;align-items: center;">
				<text  style="font-size: 36upx;" class="back iconfont icon-left"></text>
			</view>
			<image :src="dataImage" mode=""></image>
		</view>
		<view class="search-main">
			<view class="search-title">
				<view>
					<text>当前位置</text>
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="popupMenu">
						<view class="search-title-city">
							<view class="search-city">
								<text>{{popupMenu[index]}}</text>
							</view>
							<view style="line-height: 48upx;">
								<text class="iconfont icon-right"></text>
							</view>
						</view>
						<!-- <view class="uni-input">{{popupMenu[index]}}</view> -->
					</picker>
				</view>
			</view>
			<!-- <city-list v-if="bShowCities" @onPopupItemClick="onPopupItemClick" @onPopupClick='onPopupClick' :popupMenu='popupMenu'></city-list> -->
			<!-- <picker>
				<picker-view>
					<block v-for="(item,index) in popupMenu" :key="index">
						<picker-view-column>
						    
						</picker-view-column>
					</block>
					
				</picker-view>
			</picker> -->
			<view class="checkin-date-picker">
				<view class="fz13 h-c checkin-date-left" @click="onShowDatePicker(0)">
					<view class="h-c7 check-txt">
						<text>入住</text>
					</view>
					<view class="fz18 font-weight date">
						<text>{{checkInTime}}</text>
						<text style="font-family:PingFang-SC-Bold;font-size:26upx;padding-left:12upx;">{{week1}}</text>
					</view>
				</view>
				<view class="night h-c7 fz13 ">
					共{{days}}晚
				</view>
				<view class="fz13 h-c checkin-date-left" @click="onShowDatePicker(1)">
					<view class="h-c7 check-txt">
						<text>离店</text>
					</view>
					<view class="fz18 font-weight date">
						<text>{{checkOutTime}}</text>
						<text style="font-family:PingFang-SC-Bold;font-size:26upx;padding-left:12upx;">{{week2}}</text>
					</view>
				</view>
			</view>
			<mx-date-picker :show="showPicker" type="date" :value="pickerValue" :showHoliday="false" @confirm="onSelected"
			 @cancel="oncancel" />
			<view class="search-hotel">
				<view class="search-hotel-name">
					<input type="text" v-model="title" :placeholder="placeholder" placeholder-style	="font-family: PingFang-SC-Medium;font-size: 32upx;color: #cdcdcd;">
				</view>
				<!-- <view class="search-hotel-name">
					<input type="text" v-model="" :placeholder="placeholder2" placeholder-style="font-family: PingFang-SC-Medium;font-size: 32upx;color: #cdcdcd;">
				</view> -->
			</view>
			<view style="font-family:PingFang-SC-Bold;font-size: 36upx;padding: 54upx 36upx;" @click="goToHotelList">
				<button type="primary" style="background: #0092ff;letter-spacing: 1upx;">查找酒店</button>
			</view>
		</view>
	</view>
</template>

<script>
	import cityList from "@/components/custom/city-list.vue"
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		data() {
			return {
				citys:'',
				title:'',
				dataImage:'https://sz.smates.cn/filemanager/file/view/c438187218634d56a25c8008ec2de7c5/full',
				checkInTime:'',
				days:1,
				checkOutTime:'',
				showPicker:false,
				pickerValue:'',
				inFullDate:'',
				outFullDate:'',
				week1:'',
				week2:'',
				placeholder:'酒店/地名/关键词',
				placeholder2:'预期价格/星级',
				bShowCities:false,
				// popup:[],
				popupMenu: [],
				index:null
			}
		},
		components: {
			MxDatePicker,
			cityList,
		},
		onLoad:function(options){
			this.citys = options.city
			if (options && options.city) {
				this.citys = options.city;
			} else {
				this.citys = this.pub.getLocalcity();
			}
			var popup = this.pub.getCities();
			popup.forEach(item =>{
				this.popupMenu.push(item.name)
			})
			for(var i = 0; i < this.popupMenu.length; i++ ){
				// if(this.citys == popup[i])
				if(this.popupMenu[i] == this.citys){
					this.index = i
				}
			}
			console.log(this.index)
			
			console.log("地区",this.popupMenu,this.index)
			this.initDate()
		},
		methods:{
			bindPickerChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.target.value)
					this.index = e.target.value
					this.citys = this.popupMenu[this.index]
				},
			goToHotelList:function(city){
				uni.navigateTo({
					url:'/pages/hotel/hotellist?city=' + this.citys + '&title=' + this.title + '&inDate=' + this.inFullDate + '&outDate=' + this.outFullDate,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			onPopupClick: function(e) {
				this.bShowCities = !this.bShowCities
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			onShowDatePicker(i) { //显示
				this.showPicker = true;
				if (i == 0) {
					this.pickerValue = this.trueInDate 
				} else {
					this.pickerValue = this.trueOutDate
				}
				this.dateType = i
			},
			initDate() {
				
				var week = ["日", "一", "二", "三", "四", "五", "六"];
				let date = new Date()
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				let d = date.getDate()
				let z = '周' + week[new Date().getDay()]
			
				let date2 = new Date()
				date2.setDate(date2.getDate() + 1)
				let y2 = date2.getFullYear()
				let m2 = date2.getMonth() + 1
				let d2 = date2.getDate()
				let z2 = '周' + week[new Date().getDay() + 1]
			
				this.inFullDate = y + '/' + (m < 10 ? ('0' + m) : m) + '/' + (d < 10 ? ('0' + d) : d)
				this.outFullDate = y2 + '/' + (m2 < 10 ? ('0' + m2) : m2) + '/' + (d2 < 10 ? ('0' + d2) : d2)
				this.checkInTime = (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日'
				this.checkOutTime = (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'
				this.week1 = z
				this.week2 = z2
			},
			onSelected(e) { //选择
			console.log("选中的数据------------------>",e);
				if (e) {
					let result = e.value
					if (this.dateType == 0) {
						let inDate = new Date(result)
						let outDate = new Date(this.outFullDate)
						let nowDate = new Date();
						let y0 = inDate.getFullYear()
						let m0 = inDate.getMonth() + 1
						let d0 = inDate.getDate()
						let nowFullDate = y0 + '/' + (m0 < 10 ? ('0' + m0) : m0) + '/' + (d0 < 10 ? ('0' + d0) : d0);
			
						if (result < nowFullDate) {
							uni.showToast({
								title: '入时间不能小于今天！',
								icon: "none",
								duration: 3000
							})
							return false
						}
			
						let y = inDate.getFullYear()
						let m = inDate.getMonth() + 1
						let d = inDate.getDate()
						this.inFullDate = result;
						this.checkInTime = (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日'
			
						if (this.outFullDate <= result) {
							outDate = inDate;
							outDate.setDate(outDate.getDate() + 1);
						}
						let y2 = outDate.getFullYear()
						let m2 = outDate.getMonth() + 1
						let d2 = outDate.getDate()
						this.outFullDate = y2 + '/' + (m2 < 10 ? ('0' + m2) : m2) + '/' + (d2 < 10 ? ('0' + d2) : d2)
						this.checkOutTime = (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'
					} else if (this.dateType == 1) {
						if (result <= this.inFullDate) {
							uni.showToast({
								title: '离店时间必须大于当天时间！',
								icon: "none",
								duration: 3000
							})
							return
						}
						let outDate = new Date(result);
						let y2 = outDate.getFullYear()
						let m2 = outDate.getMonth() + 1
						let d2 = outDate.getDate()
						this.outFullDate = y2 + '/' + (m2 < 10 ? ('0' + m2) : m2) + '/' + (d2 < 10 ? ('0' + d2) : d2)
						this.checkOutTime = (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'
					}
			
					let days = new Date(this.outFullDate).getTime() - new Date(this.inFullDate).getTime()
					this.days = parseInt(days / (1000 * 60 * 60 * 24))
					this.showPicker = false
				}
				// this.getRoomInfo();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.input-placeholder{
		font-family: PingFang-SC-Medium;
		font-size: 32upx;
		color: #cdcdcd;
	}
	.search-hotel{
		font-family: PingFang-SC-Medium;
		font-size: 32upx;
		color: #333333;
		border-bottom: 1upx solid #eee;
		.search-hotel-name{
			padding: 34upx 0;
		}
	}
	.search-main{
		border-radius: 10upx;
		// width: 98%;
		margin-top: -108upx;
		position: relative;
		z-index: 99;
		background-color: #ffffff;
		box-shadow: 7px 5px 18px 0px 
		rgba(0, 0, 0, 0.1);
		margin: -108upx 16upx 0 16upx;
		padding: 42upx 38upx 0 38upx;
		
	}
	.search-title-city{
		display: flex;
		justify-content: space-between;
		padding-top: 18upx;
		border-bottom: 1upx solid #eee;
		padding-bottom: 34upx;
	}
	.title-image{
		width: 100%;
		height: 451upx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.checkin-date-picker {
		padding: 36upx 0 36upx 0;
		// margin: 20upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1upx solid #eee;
	
		.checkin-date-left {
			// display: flex;
			// flex-direction: row-reverse;
			// align-content: center;
			// padding: 16upx;
			padding-left: 10upx;
			.check-txt{
				margin-bottom: 16upx;
				margin-left: 10upx;
				// display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24upx;
			}
			.date {
				font-family: PingFang-SC-Bold;
				font-size: 36upx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0px;
				color: #333333;
				// padding-top: 16upx;
			}
		}
		
	}
	.search-title{
		font-family: PingFang-SC-Regular;
		font-size: 24upx;
		color: #333333;
		.search-city{
			font-family: PingFang-SC-Regular;
			font-size: 38upx;
			font-weight: bold;
			// font-stretch: normal;
			// letter-spacing: 0px;
			color: #333333;
		}
	}
	.night{
		border-radius: 50upx;
		border: solid 1upx #999999;
		font-family: PingFang-SC-Medium;
		font-size: 26upx;
		color: #333333;
		padding: 6upx 22upx;
		margin-top: -20upx;
	}
</style>
